import { CaseConfigType } from '@shared';
import { BasicComponent } from './basic/basic.component';
import { Demo2Component } from './demo2/demo2.component';
import { Demo3Component } from './demo3/demo3.component';
import { Demo4Component } from './demo4/demo4.component';
import { DotComponent } from './dot/dot.component';
import { DescriptionComponent } from './description/description.component';
import { VerticalComponent } from 'cxd/showcase/wizard/vertical/vertical.component';

export const WizardConfig: CaseConfigType = {
  location: 'Wizard',
  description: `向导是指向性强的组件，给输入的内容分类，按步骤呈现。每步的内容存在明显的不同，引导用户轻松输入较多的内容。`,
  description_en: `The wizard is a highly directional component that classifies the input content and presents it in steps. The content of each step is obviously different, guiding users to easily input more content.`,
  component: [
    {
      demo: BasicComponent,
      codePath: 'showcase/wizard/basic/basic.component',
      demoTitle: '基础',
      demoTitle_en: 'Basic',
      demoDescription: '普通的向导。',
      demoDescription_en: 'Ordinary wizard. ',
    },
    {
      demo: Demo2Component,
      codePath: 'showcase/wizard/demo2/demo2.component',
      demoTitle: '图标模式',
      demoTitle_en: 'Icon Mode',
      demoDescription: '每个步骤根据状态显示不同图标。',
      demoDescription_en: 'Each step displays a different icon depending on the status.',
    },
    {
      demo: VerticalComponent,
      codePath: 'showcase/wizard/vertical/vertical.component',
      demoTitle: '纵向步骤条',
      demoTitle_en: 'Vertical Steps',
      demoDescription: '简单的竖直方向的步骤条。',
      demoDescription_en: 'Simple vertical step bar.',
    },
    {
      demo: Demo3Component,
      codePath: 'showcase/wizard/demo3/demo3.component',
      demoTitle: '横向标签',
      demoTitle_en: 'Horizontal Label',
      demoDescription: '用于对纵向空间利用率较高的页面或容器。',
      demoDescription_en: 'Used for pages or containers that have a high utilization of vertical space.',
    },
    {
      demo: Demo4Component,
      codePath: 'showcase/wizard/demo4/demo4.component',
      demoTitle: '步骤可点击',
      demoTitle_en: 'Step Clickable',
      demoDescription: '向导步骤可点击。',
      demoDescription_en: 'The wizard steps can be clicked.',
    },
    {
      demo: DotComponent,
      codePath: 'showcase/wizard/dot/dot.component',
      demoTitle: '点状步骤条',
      demoTitle_en: 'Dotted step bar',
      demoDescription: '点状步骤条。',
      demoDescription_en: 'Dotted step bar.',
    },
    {
      demo: DescriptionComponent,
      codePath: 'showcase/wizard/description/description.component',
      demoTitle: '描述',
      demoTitle_en: 'Description',
      demoDescription: '描述（辅助信息）',
      demoDescription_en: 'Description(Auxiliary information)',
    },
  ],
  mApi: [
    {
      name: 'lv-wizard',
      name_en: 'lv-wizard',
      selector: 'lv-wizard',
      snippet: `
        <lv-wizard [lvStatus]="\${1:process}" [lvActiveIndex]="\${2:1}">
          <lv-wizard-step>\${3:Wizard 01}</lv-wizard-step>
          <lv-wizard-step>\${4:Wizard 02}</lv-wizard-step>
          <lv-wizard-step>\${5:Wizard 03}</lv-wizard-step>
        </lv-wizard>
    `,
      api: [
        {
          attribute: 'lvTheme',
          type: 'string',
          default: 'light',
          description: `主题风格，可选值： 'light' | 'dark'。`,
          description_en: `Theme style, optional value: 'light' | 'dark'.`,
        },
        {
          attribute: 'lvMode',
          type: 'string',
          default: 'number',
          description: `步骤的展示类型，可选值： 'number' | 'icon'。`,
          description_en: `Step display type,optional value: 'number' | 'icon'.`,
        },
        {
          attribute: 'lvSize',
          isAttrAbandon: true,
          type: 'string',
          default: 'default',
          description: `大小，可选值： 'default'。`,
          description_en: `size,optional value: 'default'.`,
        },
        {
          attribute: 'lvLabelWidth',
          type: 'string',
          default: 'auto',
          description: `步骤的标签宽度，默认为自适应。`,
          description_en: `Step width of the step,Default is adaptive.`,
        },
        {
          attribute: 'lvLabelPlacement',
          type: 'string',
          default: 'vertical',
          description: `标签放置位置，可选值： 'vertical' | 'horizontal'。配置lvDirection为vertical后，lvLabelPlacement将失效`,
          description_en: `Label placement,optional value: 'vertical' | 'horizontal'.Setting lvDirection value vertical,lvLabelPlacement becomes invalid`,
        },
        {
          attribute: 'lvDirection',
          type: 'string',
          default: 'horizontal',
          description: `步骤条布局方向，可选值： 'vertical' | 'horizontal'。`,
          description_en: `Wizard Direction,optional value: 'vertical' | 'horizontal'.`,
        },
        {
          attribute: 'lvStatus',
          type: 'string',
          default: 'null',
          description: `当前步骤的状态，可选值：'wait' | 'process' | 'finish' | 'error'。`,
          description_en: `Current step status,optional value: 'wait' | 'process' | 'finish' | 'error'.`,
        },
        {
          attribute: 'lvType',
          type: 'string',
          default: 'default',
          description: `节点样式类型，可选值：'default' | 'dot'`,
          description_en: `Node style type,optional value:'default' | 'dot'`,
        },
        {
          attribute: 'lvActiveIndex',
          type: 'number',
          default: '0',
          description: `当前步骤的索引值。`,
          description_en: `The index value of the current step.`,
        },
        {
          attribute: 'lvStartNumber',
          type: 'number',
          default: '1',
          description: `展示类型为 'number' 时生效，步骤的起始值。`,
          description_en: `Effective when the display type is 'number', the starting value of the step.`,
        },
      ],
      event: [
        {
          event: 'lvClick ',
          parameter: `index`,
          description: '向导点击事件回调函数，参数为当前点击步骤的索引值。',
          description_en: `The wizard clicks on the event callback function, and the parameter is the index value of the current click step.`,
        },
      ],
    },
    {
      name: 'lv-wizard-step',
      name_en: 'lv-wizard-step',
      selector: 'lv-wizard-step',
      snippet: `
      <lv-wizard [lvMode]="\${1:icon}" [lvStatus]="\${2:status}" [lvActiveIndex]="\${3:activeIndex}" (lvClick)="\${4:click($event)}">
        <lv-wizard-step>\${5:Wizard 01}</lv-wizard-step>
        <lv-wizard-step>\${6:Wizard 01}</lv-wizard-step>
        <lv-wizard-step>\${7:Wizard 01}</lv-wizard-step>
      </lv-wizard>`,
      api: [
        {
          attribute: 'lvIcon',
          type: 'templateRef',
          default: 'null',
          description: `向导步骤的模板，可自定义图标或其他任何元素。`,
          description_en: `Template for the wizard step, which can be used to customize the icon or any other element.`,
        },
        {
          attribute: 'lvStatus',
          type: 'string',
          default: 'null',
          description: `步骤的状态，当不配置该属性时，会根据 lvActiveIndex 来自动适配状态。可选值：'wait' | 'process' | 'finish' | 'error'。`,
          description_en: `The state of the step, when the attribute is not configured, the state is automatically adapted according to lvActiveIndex.optional value:'wait' | 'process' | 'finish' | 'error'.`,
        },
        {
          attribute: 'lvReadonly',
          type: 'boolean',
          default: 'false',
          description: `是否只读。配置该属性为 true 时，即使配置了点击回调函数 lvClick，点击该步骤也不会执行。`,
          description_en: `Whether it is read only. When this property is set to true, even if the click callback function lvClick is configured, clicking this step will not execute.`,
        },
        {
          attribute: 'lvDescription',
          type: 'string | templateRef',
          default: 'null',
          description: `描述（辅助信息）`,
          description_en: `description(Auxiliary information)`,
        },
      ],
      event: [],
    },
  ],
};
